<%--
  Created by IntelliJ IDEA.
  User: YANG
  Date: 2021/2/4/0004
  Time: 17:26:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>品牌数据表</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        a{
            color: blue;
            text-decoration: none;
        }
        a:visited{
            color: blue;
        }
        td{
            height: 38px;
        }
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
            top: 50%;
            transform: translateY(35%);
        }
    </style>
    <link type="text/css" rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="application/javascript" src="layui/layui.js"></script>
    <script type="application/javascript">
        layui.use(['layer','form','table',"util","laydate","upload"],function () {
            var layer = layui.layer,
                form = layui.form,
                table = layui.table,
                util = layui.util,
                laydate = layui.laydate,
                upload = layui.upload;
            layer.msg("品牌信息");
            laydate.render({
                elem: '#ontime'
            });
            laydate.render({
                elem: '#alOntime'
            });
            var tabins = table.render({
                elem:"#brandTbl",
                width:1200,
                url:"showPageOfBrand",
                limit:3,
                limits:[3,6,9,12],
                page:true,
                cols:[[
                    {checkbox: true,align:"center"}
                    ,{field: 'id', title: '产品编号', width: 80,align:"center"},
                    {field:"name",title:"品牌名称",align:"center"},
                    {field:"logo",title:"LOGO",align:"center",
                        templet:"<div><img src='{{d.logo}}' style='width: 30px;height: 30px' alt='暂无图片'></div>"},
                    {field:"discription",title:"品牌描述",align:"center"},

                    {field:"url",title:"官方网站",align:"center"},
                    {field:"status",title:"状态",align:"center"},
                    {title:"操作",toolbar:'#toolbar',align:"center"}
                ]]
            });

            $("#addBrandBtn").click(function () {
                layer.open({
                    type:1,
                    title:"添加品牌数据",
                    area:["600px","600px"],
                    content:$("#addBrand")
                });
            });

            form.on("submit(addBrandFilter)",function (data) {
                $.ajax({
                    type:"post",
                    url:"/addBrand",
                    data:$("#addBrandForm").serialize(),
                    success:function (resp) {
                        $("#addBrandForm")[0].reset();
                        layer.closeAll();
                        tabins.reload({
                            page:{
                                curr:1
                            }
                        });
                        $("#demo1").attr("src","");
                        layer.msg(resp);
                    },
                    error:function (resp) {
                        layer.msg("哎呀出错了，添加失败！")
                    }
                });
                return false;
            });

            table.on('tool(brandTableFilter)',function (data) {
                var brandId=data.data.id;
                if(data.event=='del'){
                    $.get("/removeBrand/"+brandId,{},function (resp) {
                        tabins.reload({
                            page:{
                                curr:1
                            }
                        });
                        layer.msg(resp.msg);
                    });
                }else{
                    layer.open({
                        type:1,
                        title:"修改品牌数据",
                        area:["600px","600px"],
                        content:$("#alterBrand")
                    });
                    $.get("findBrand/"+brandId,{},function (resp) {
                        form.val("alterBrandFormFilter",{
                            "id":resp.id,
                            "name":resp.name,
                            "discription":resp.discription,
                           // "ontime":dateFormat(resp.ontime),
                            "url":resp.url,
                            "log":resp.log
                        });
                        $("#redemo1").attr("src",resp.log)
                    });
                }
            });

            // function dateFormat(d) {
            //     return util.toDateString(d,"yyyy-MM-dd");
            // }

            form.on("submit(alterBrandFilter)",function (data) {
                $.ajax({
                    type:"post",
                    url:"alterBrand",
                    data:$("#alterBrandForm").serialize(),
                    success:function (resp) {
                        tabins.reload();
                        layer.closeAll();
                        $("#alterBrandForm")[0].reset();
                        layer.msg(resp.msg);
                    },
                    error:function (resp) {
                        layer.msg("哎呀出错了，修改失败！")
                    }
                });
                return false;
            });

            $("#removeBrand").click(function () {
                var ids=[];
                var checkStatus = table.checkStatus('brandTbl');
                $.each(checkStatus.data,function (index,item) {
                    ids.push(item.id);
                });
                if (ids.length > 0) {
                    $.get("/delBrand?ids="+ids,{},function (resp) {
                        tabins.reload({
                            page:{
                                curr:1
                            }
                        });
                        layer.msg(resp.msg);
                    });
                }else {
                    layer.msg("未勾选需要删除的数据！！！")
                }
            });

            form.on("submit(queryBrandFilter)",function (data) {
                tabins.reload({
                    where:{
                        name:data.field.name,
                      //  price:data.field.price
                    },
                    method:"post",
                    page:{
                        curr:1
                    }
                });
                return false;
            });

            $("#reSelect").click(function () {
                tabins.reload({
                    where:{
                        name:null,
                       // price:null
                    },
                    method:"post",
                    page:{
                        curr:1
                    }
                });
            });

            upload.render({
                elem: '#upLog'
                ,url: "uploadFile"
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }else {
                        $("#addLog").val(res.log);
                    }
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });

            upload.render({
                elem: '#reUpLog'
                ,url: "uploadFile"
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#redemo1').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }else {
                        $("#alterLog").val(res.log);
                    }
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#redemoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });

        });
    </script>
</head>
<body>
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;编辑</i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;删除</i></a>
</script>
<div align="center">
    <p style="font-weight: 600;font-size: 26px;margin: 0">品牌数据列表</p>
    <div style="margin-bottom: 10px">
        <button type="button" id="addBrandBtn" class="layui-btn layui-btn-sm layui-btn-radius"><i class="layui-icon">添加服装</i></button>
        <button type="button" id="removeBrand" class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius"><i class="layui-icon">批量删除</i></button>
    </div>
    <form class="layui-form" id="queryBrandForm">
        品牌名称：
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="请输入品牌名称" autocomplete="off" class="layui-input">
        </div>
        状态：
        <div class="layui-input-inline" style="width: 80px">
            <select id="topicSel" lay-filter="topicSel" style="width: 50px">
            </select>
        </div>

        <div class="layui-input-inline">
            <button class="layui-btn layui-btn-sm layui-btn-radius" lay-submit lay-filter="queryBrandFilter"><i class="layui-icon">&#xe615;</i>立即查询</button>
            <button type="reset" id="reSelect" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-radius"><i class="layui-icon">&#xe9aa;</i>重置</button>
        </div>
    </form>
    <table id="brandTbl" lay-filter="brandTableFilter"></table>
</div>

<div class="layui-container" id="addBrand" align="center" style="display: none;width: 500px;height: 300px">
    <h2 style="margin-bottom: 10px">添加服装数据</h2>
    <form class="layui-form" id="addBrandForm"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

        <input type="hidden" name="log" id="addLog">

        <div class="layui-form-item">
            <label class="layui-form-label">品牌名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入品牌名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">服装描述</label>
            <div class="layui-input-block">
                <input type="text" name="discription" placeholder="请输入服装描述" autocomplete="off" class="layui-input">
            </div>
        </div>
        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">上架时间</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--<input type="text" name="ontime" id="ontime" class="layui-input" placeholder="yyyy-MM-dd"   autocomplete="off">--%>
            <%--</div>--%>
        <%--</div>--%>
        <div class="layui-form-item">
            <label class="layui-form-label">官方网站</label>
            <div class="layui-input-block">
                <input type="text" name="url" placeholder="请输入官方网站" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="padding-top: 25px">
                <button type="button" class="layui-btn" id="upLog"><i class="layui-icon">&#xe681;</i>上传图片</button>
            </label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <div class="layui-upload-list" align="left">
                        <img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px;margin-left: 74px">
                        <p id="demoText" style="margin-left: 74px"></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn" id="add_brand" lay-submit lay-filter="addBrandFilter">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>

    </form>
</div>
<div class="layui-container" id="alterBrand" align="center" style="display: none;width: 500px;height: 300px">

    <h2 style="margin-bottom: 10px">修改服装数据</h2>
    <form class="layui-form" id="alterBrandForm" lay-filter="alterBrandFormFilter">

        <input type="hidden" name="log" id="alterLog">

        <div class="layui-form-item">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-block">
                <input type="text" name="id" readonly class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">品牌名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入品牌名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">服装描述</label>
            <div class="layui-input-block">
                <input type="text" name="discription" placeholder="请输入服装描述" autocomplete="off" class="layui-input">
            </div>
        </div>
        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">上架时间</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--<input type="text" name="ontime" id="alOntime" class="layui-input" placeholder="yyyy-MM-dd"  autocomplete="off">--%>
            <%--</div>--%>
        <%--</div>--%>
        <div class="layui-form-item">
            <label class="layui-form-label">官方网站</label>
            <div class="layui-input-block">
                <input type="text" name="url" placeholder="请输入官方网站" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="padding-top: 25px">
                <button type="button" class="layui-btn" id="reUpLog"><i class="layui-icon">&#xe681;</i>上传图片</button>
            </label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <div class="layui-upload-list" align="left">
                        <img class="layui-upload-img" id="redemo1" style="width: 100px;height: 100px;margin-left: 74px" alt="暂无图片">
                        <p id="redemoText" style="margin-left: 74px"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit lay-filter="alterBrandFilter">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>

    </form>
</div>
</body>
</html>